<template>
  <div class="orderRecord">
    <el-table v-loading="toLoad" border :data="toList" style="width: 100%">
      <el-table-column prop="id" align="center" label="ID" min-width="110"></el-table-column>
      <el-table-column prop="message" label="操作记录" align="center" min-width="350"></el-table-column>
      <el-table-column prop="createDateUTC" label="操作时间" align="center" min-width="170">
        <template slot-scope="{ row }">
          <span v-if="row.createDateUTC">{{ row.createDateUTC | uctTimeFileter }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="box">
      <pagination
        v-show="page.total > 0"
        :total="page.total"
        :page.sync="page.current"
        :limit.sync="page.limit"
        :page-sizes="[10, 20, 30, 50]"
        @pagination="toRecord"
      />
    </div>
  </div>
</template>

<script>
import {
  getOrderLogApi as getOrderRecordApi
} from '@/api/order';

export default {
  name: 'Index',
  props: {
    id: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      toLoad: false,
      toList: [],
      page: {
        total: 0,
        current: 1,
        limit: 10
      }
    }
  },
  created() {
    this.toRecord();
  },
  methods: {
    toRecord() {
      this.$set(this, 'toLoad', true);
      getOrderRecordApi(this.id, {
        pageNumber: this.page.current,
        pageSize: this.page.limit
      }).then(res => {
        this.$set(this, 'toList', res.data);
        this.$set(this.page, 'total', res.head.totalCount);
        this.$set(this, 'toLoad', false);
      }).catch((err) => {
        this.$set(this, 'toList', []);
        this.$set(this.page, 'total', 0);
        this.$set(this, 'toLoad', false);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .orderRecord {
    ::v-deep .box {
      .pagination-container {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 25px;
        padding: 0 0 !important;
      }
    }
  }
</style>
